<template>
	<common-card type="detail" title="实验反馈详情" :loading="loading">
		<detail-body :data="dataDetail"></detail-body>
		<div class="data_detail_wrapper" v-if="feedbackData.length > 0">
			<div class="item">
				<div class="label">实验结果：</div>
				<div class="experiment_result">
					<el-table :data="experimentResult" class="index_table_wrapper">
						<el-table-column prop="startTime" label="开始时间" min-width="120"></el-table-column>
						<el-table-column prop="endTime" label="结束时间" min-width="120"></el-table-column>
						<el-table-column prop="headName" label="实验人员" min-width="120"></el-table-column>
						<el-table-column prop="filed5" label="实验总结">
							<template slot-scope="{ row }">
								<el-button type="text" @click="handleDownloadSummary(row.filed5)">下载总结</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="item">
				<div class="label">实验反馈：</div>
				<div class="feedback">
					<dl v-for="(item, index) in feedbackData" :key="index">
						<dt>
							<span>反馈人：{{ item.user }}</span>
							<span>反馈时间：{{ item.time }}</span>
							<el-rate v-model="item.rateNum" text-color="#606266" disabled-void-color="#C0C4CC" show-text disabled></el-rate>
						</dt>
						<dd v-html="$cleanStyle(item.content)"></dd>
					</dl>
				</div>
			</div>
		</div>
		<template slot="button">
			<el-button type="danger" icon="sw-icon-btn-feedback" @click="handleDataFeedback()">反馈</el-button>
		</template>
		<feedback-form v-model="feedbackDialog" :data-id="experimentId" @finish="getFeedbackData"></feedback-form>
	</common-card>
</template>

<script>
import detailBody from './body';
import feedbackForm from './feedback';
import commonCard from '../commonCard';
import { experimentDetail } from '@/api/business/tbExperiment';
import { queryFeedbackPageList } from '@/api/system/sysFeedback';
export default {
	components: { commonCard, detailBody, feedbackForm },
	props: {
		userRole: { type: String, default: '' },
		dataType: { type: String, default: '' }
	},
	data() {
		return {
			loading: false,
			dataDetail: {},
			feedbackData: [],
			experimentId: '',
			feedbackDialog: false
		};
	},
	computed: {
		dataId() {
			return this.$route.query.id || '';
		},
		//实验结果
		experimentResult() {
			return this.dataDetail.piStatList || [];
		}
	},
	watch: {
		dataId: {
			async handler(id) {
				this.loading = true;
				await this.getDataDetail();
				await this.getFeedbackData();
				this.loading = false;
			},
			immediate: true
		}
	},
	methods: {
		//获取数据详情
		async getDataDetail() {
			let result = await experimentDetail(this.dataId).then((res) => res.data);
			if (result.code === '0') {
				this.dataDetail = this.$detailData(result.data);
			}
		},

		//获取实验反馈数据
		async getFeedbackData() {
			let params = { page: 1, limit: 99999, siteId: this.dataId };
			let result = await queryFeedbackPageList(params).then((res) => res.data);
			if (result.code === '0') {
				let datas = result.data || [];
				this.feedbackData = datas.map((n) => {
					return { user: n.sysUser?.userName, time: n.createTime, rateNum: Number(n.filed1), content: n.content };
				});
			}
		},

		handleDataFeedback() {
			this.experimentId = this.dataId;
			this.feedbackDialog = true;
		},

		//下载总结
		handleDownloadSummary(value) {
			if (!this.$isJSON(value)) {
				this.$message.warning('暂无实验总结文件，请联系管理员进行咨询');
			} else {
				let attachData = JSON.parse(value);
				if (attachData.length === 0) {
					this.$message.warning('暂无实验总结文件，请联系管理员进行咨询');
				} else {
					this.$fileDownload(attachData[0].url, `${attachData[0].name}.${attachData[0].suffix}`);
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.experiment_result {
	width: 100%;
}
</style>
